import { forwardRef } from 'react'
import { connect } from '@formily/react';
import './style.less';
import FocusView from './view/focusView';
import Detail from './view/detail';
import BizHeader from '@inbiz/basic/BizHeader';
import BizBody from '@inbiz/basic/BizBody';

export interface BannerProps {
  /**
   * @description 组件样式名，和style样式对应 ↓↓ eg: inbiz-Banner ↓↓
   */
  prefixCls?: string;
  /**
   * @description 扩展样式名
   * @default button
   */
  className?: string;
  onClick?: (e: any) => void;
  /**
   * @description 视图类型
   * @default focus 焦点图片
   */
  viewType: string;
  /**
   * @description 标题
   */
  title: any;
  /**
   * @description 标题图标
   */
  icon: any;
  /**
   * @description 标题字号
   */
  titlesize: number;
  /**
   * @description 标题字色
   */
  titlecolor: string;
  /**
   * @description 标题背景色
   */
  titlebgcolor: string;
  /**
   * @description 标识
   * @default -
   */
  identification: string;
  /**
   * @description 分类
   * @default -
   */
  imgCate: any;
  /**
   * @description 详细页
   * @default -
   */
  detail: string;
  /**
   * @description 显示图片标题
   * @default true
   */
  showImgTitle: boolean;
  /**
   * @description 摘要字体大小
   * @default 12
   */
  abstract: number;
  /**
   * @description 显示图片数量
   * @default 2
   */
  displayNum: number;
  /**
   * @description 自动滚动
   * @default true
   */
  autoRoll: boolean;
  /**
   * @description 滚动间隔时间
   * @default 0.5
   */
  delay: number;
  /**
   * @description 左右留白
   * @default true
   */
  blank: boolean;
  /**
   * @description 图片宽度
   * @default 232
   */
  imgWidth: number;
  /**
   * @description 图片高度
   * @default 150
   */
  imgHeight: number;
  refs: any;
  emit: () => void,
  callBackEvents: {
    onParams: <T>(data: T) => Promise<T>,
    onRequest: (data: object) => Promise<Banner.ImgItem>,
    onData: <T>(data: T) => Promise<T>
  }
}

const Banner = (props: BannerProps, ref: any) => {
  const { className, viewType, ...others } = props;

  return (
    <div className="inbiz-Banner">
      {viewType !== 'detail' && <BizHeader {...props} />}
      <BizBody {...props}>
        {viewType === 'detail' ? (
          <Detail {...{ ...others, viewType }} />
        ) : (
          <FocusView {...{ ...others, viewType }} refs={ref}/>
        )}
      </BizBody>
    </div>
  );
};

export default forwardRef(Banner);
